<template>
    <div class="home">
        <div class="index-header">
            <div class="header mn">
                <div class="logo">
                    <img alt="" src="../../assets/logo.png">
                    <div class="txt">
                        <div class="tt">济南域潇集团有限公司</div>
                        <div class="tt">招投标系统</div>
                    </div>
                </div>
                <div class="nav">
                    <div v-for="(item,index) in nav" class="navitem" @click="GetLinkUrl(index)">
                        {{ item.name }}
                    </div>
                    <div class="login">
                        登录/注册
                    </div>
                </div>
            </div>
        </div>
        <div class="banner">
            <img alt="" src="../../assets/banner.png">
            <div class="text">
                <div class="cont">
                    <div class="tt">济南域潇集团有限公司 招投标系统</div>
                    <div class="seach">
                        <el-input v-model="input" :prefix-icon="Search" placeholder="请输入相应的招标项目名称进行搜索"
                                  style="font-size: 18px"/>
                        <el-button
                            style="width: 120px;height: 50px;background: #1A52FF;margin-right: 5px;border: none;border-radius: 8px"
                            type="primary">搜索
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="data-mod mn">
            <div class="data-mod-item">
                <el-icon :size="40" color="#1a52ff">
                    <Collection/>
                </el-icon>
                <div class="tt">
                    9999
                </div>
                <p>项目成交总额</p>
            </div>
            <div class="data-mod-item">
                <el-icon :size="40" color="#1a52ff">
                    <OfficeBuilding/>
                </el-icon>
                <div class="tt">
                    9999
                </div>
                <p>项目成交总额</p>
            </div>
            <div class="data-mod-item">
                <el-icon :size="40" color="#1a52ff">
                    <Position/>
                </el-icon>
                <div class="tt">
                    9999
                </div>
                <p>项目成交总额</p>
            </div>
        </div>

        <div class="title">
            招标信息
        </div>
        <div class="list mn">
            <div v-for="item in 10" class="list-item">
                <div class="tt">济南域潇集团招标采购项目</div>
                <div class="tags">
                    <el-tag style="margin-right: 10px;">招标分类</el-tag>
                    <el-tag type="danger">139万元</el-tag>
                </div>
                <div class="time">
                    2023-07-12
                </div>
            </div>
        </div>
        <div class="more mn">
            <p>查看更多</p>
            <div class="yuan">
                <el-icon><ArrowRight /></el-icon>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script setup>
/**
 * 组件引入
 */
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import http from "../../api/api.js"
import msg from "../../utils/Message.js"
import {Search} from '@element-plus/icons-vue'
import Footer from "../../components/Footer.vue"
import Cookies from "js-cookie";

/**
 * 全局变量
 * @type {UnwrapNestedRefs<{count: string, list: *[]}>}
 */

// 导航
var nav = reactive([
    {
        id: 1,
        name: "首页",
    }, {
        id: 2,
        name: "招标项目",
    }, {
        id: 3,
        name: "消息中心",
    }
])
const router = useRouter()

// 招标信息
var list = reactive([
    {
        id: 1,
        title: "济南域潇集团招标采购项目",
        catname: "招标分类",
        price: "139万元",
        inpottime: "2020-10-31"
    },
    {
        id: 1,
        title: "济南域潇集团招标采购项目",
        catname: "招标分类",
        price: "139万元",
        inpottime: "2020-10-31"
    }, {
        id: 1,
        title: "济南域潇集团招标采购项目",
        catname: "招标分类",
        price: "139万元",
        inpottime: "2020-10-31"
    },{
        id: 1,
        title: "济南域潇集团招标采购项目",
        catname: "招标分类",
        price: "139万元",
        inpottime: "2020-10-31"
    }
])

// 搜索关键词
var input = ref("");


// 全局数据
var initData = ref({
    list: [],
})


/**
 * 页面挂载后
 */
onMounted(() => {
    // initPageData();
});


/**
 * 方法区
 */
 // 跳转
function GetLinkUrl(index) {
    if(index == 0){
        router.push('/')
    }
    if(index == 1){
        router.push('/cases')
    }
    if(index == 2){
        const token = Cookies.get("token")
        if (!token) {
            msg.message("您未登录，请登录", 'error')
            return
        }
        router.push('/message')
    }

}
// 初始化数据
const initPageData = () => {
    http.HttpGet("GetDocumentClassIndex").then((res) => {
        initData.loading = false
        if (res.code == 0) {
            initData.list = res.data
            msg.message(res.msg)
        } else {
            msg.message(res.msg, 'error')
        }
    })
}

</script>
<style lang="scss" scoped>
@import '../../assets/scss/index.scss';

</style>
